<template>
  <CardDialog v-model:visible="show" width="80%" title="船舶管理">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="船舶名称" class="smart-query-form-item">
          <a-input v-model:value="queryForm.vesselName" placeholder="请输入船舶名称" />
        </a-form-item>
        <a-form-item label="MMSI" class="smart-query-form-item">
          <a-input v-model:value="queryForm.mmsi" placeholder="请输入MMSI" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="queryData">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="reset" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>
    <div class="table-head">
      <!-- <a-button class="card-btn" type="default" style="margin-bottom: 15px" @click="handleCreate">添加船舶</a-button> -->
    </div>
    <div class="radar-content">
      <a-table
        class="crud-table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: '100%', y: 'calc(100vh - 310px)' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'vesselName'">
            {{ record.vesselName || '暂无船名' }}
          </template>
          <template v-if="column.dataIndex === 'vesselType'">
            {{ getDictLabel(record.vesselType, shipType, { value: 'value', label: 'label' }) }}
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button type="text" size="small" class="operat-button" @click="handleUpdate(record)">信息补充</a-button>
            <!-- <a-button type="text" size="small" class="operat-button" @click="handleDelete(record)">删除</a-button> -->
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :defaultPageSize="queryForm.size"
          v-model:current="queryForm.current"
          v-model:pageSize="queryForm.size"
          :total="total"
          @change="onload"
          @showSizeChange="onload"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
    <formDialog ref="formRef" @onload="uploadData" :bridgeList="bridgeList" />
  </CardDialog>
</template>
<script setup>
  import { ref, computed } from 'vue';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import { api } from '/@/api/plat/ais-static.js';
  import formDialog from './form.vue';
  import { PageMixin } from '/@/utils/mixin';
  import { shipType } from '/@/config/shipType.js';
  import { getDictLabel } from '/@/utils/methods.js';
  const { deleteFn } = PageMixin();

  let show = ref(false);
  const formRef = ref();
  const columns = [
    {
      title: '船舶英文名',
      dataIndex: 'vesselName',
      width: 180,
    },
    {
      title: '船舶中文名',
      dataIndex: 'vesselLocalName',
      width: 180,
    },
    {
      title: 'MMSI',
      dataIndex: 'mmsi',
      width: 110,
      align: 'center',
    },
    {
      title: 'IMO',
      dataIndex: 'imo',
      width: 120,
      align: 'center',
    },
    {
      title: '呼号',
      dataIndex: 'callSign',
      width: 110,
      align: 'center',
    },
    {
      title: '吃水',
      dataIndex: 'draft',
      width: 110,
      align: 'center',
    },
    {
      title: '船舶类型',
      dataIndex: 'vesselType',
      width: 110,
      align: 'center',
    },
    {
      title: '发现时间',
      dataIndex: 'createTime',
      width: 170,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      fixed: 'right',
      align: 'center',
    },
  ];
  const tableData = ref([]);
  const bridgeList = ref([]);
  let loading = ref(false);
  const queryFormState = {
    current: 1,
    size: 10,
    mmsi: '',
    vesselName: '',
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });

  function queryData() {
    queryForm.value.current = 1;
    onload();
  }

  // 搜索重置
  function reset() {
    queryForm.value = { ...queryFormState };
    onload();
  }

  function onload() {
    loading.value = true;
    api.queryPage(queryForm.value).then(({ data }) => {
      tableData.value = data.records;
      total.value = data.total;
      loading.value = false;
    });
  }

  const emits = defineEmits(['uploadConfig']);
  function uploadData() {
    onload();
    emits('uploadConfig', 'radar');
  }

  function handleCreate() {
    formRef.value.open();
  }

  function handleUpdate(row) {
    formRef.value.open(row);
  }

  function handleDelete(data) {
    deleteFn(data, api.delete, 'radarId').then(() => {
      onload();
    });
  }

  function open() {
    show.value = true;
    queryData();
  }

  function getBridgeName(val) {
    const row = bridgeList.value.find((m) => m.bridgeId === val) || {};
    return row.bridgeName;
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import './index.less';
  @import '/@/assets/style/table.less';
  .smart-query-form {
    background-color: initial;
    &:deep label {
      color: #fff;
    }
  }
</style>
